<template>
  <f7-page>
    <!-- <qm-currentcy-navbar title="工程状态">
      <template #nav-right>
        <f7-icon f7="house"></f7-icon>
      </template>
    </qm-currentcy-navbar> -->
    <f7-navbar>
      <f7-nav-left>
        <f7-link back>
          <i class="nav-icon__back f7-icons">chevron_left</i>
        </f7-link>
      </f7-nav-left>
      <f7-nav-title class="nav-color">工程状态</f7-nav-title>
      <f7-nav-right>
        <f7-link actions-open="#actions-one-group">
          <f7-icon f7="house" style="color: #fff">
            <!-- <f7-button large ></f7-button> -->
          </f7-icon>
        </f7-link>
      </f7-nav-right>
    </f7-navbar>
    <div class="head-box">
      <div class="head-project">
        <div class="head-img">
          <img src="static/img/list/icon-list-xiangmu.png" alt="" />
        </div>
        <div class="head-name">{{ name }}</div>
      </div>
      <div class="head-status">
        <qm-field
          label="工程状态"
          v-model="caseId"
          readonly
          placeholder="请选择"
          input-align="right"
          :is-link="true"
          @click="changeStatus"
        >
        </qm-field>
      </div>
    </div>
    <div class="content">
      <div class="content-title">更新记录</div>
      <div class="content-messages">
        <div
          v-for="(item, index) in record"
          :key="index"
          class="content-message"
        >
          <div class="left">
            <div class="circular"></div>
            <div class="dotted-line"></div>
          </div>
          <div class="right">
            <div class="message-head">
              <div>
                <span class="date">{{ item.createTime | date }}</span>
                <span class="time">{{ showTimes(item.createTime) }}</span>
              </div>
              <div
                class="status"
                :style="
                  item.status == '审核通过'
                    ? 'color:#AAAAAA;border:1px solid #AAAAAA'
                    : ''
                "
              >
                {{ item.status }}
              </div>
            </div>
            <div class="body">
              <div class="body-head">
                <div class="bhead-left">
                  <div class="">质量工程状态</div>
                  <div>安全工程状态</div>
                  <div>操作人</div>
                </div>
                <div class="bhead-right">
                  <div>{{ item.qualityOpenStatusName }}</div>
                  <div>{{ item.safeOpenStatusName }}</div>
                  <div>
                    <span class="name">{{ item.createUserName }}</span>
                    <img
                      src="static/img/center/index4/icon-me-shouji.svg"
                      alt=""
                    />
                    <span class="phone">{{ item.phone }}</span>
                  </div>
                </div>
              </div>
              <div class="body-foot">
                <div>文件依据:</div>
                <div>...</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      name: "广州市海珠区广船机械厂让地块配套小学建设...",
      caseId: "在建工程",
      record: [
        {
          createTime: "2022-08-24 17:12:46",
          status: "待审核",
          qualityOpenStatusName: "在建工程",
          safeOpenStatusName: "在建工程",
          createUserName: "李祖江",
          phone: "18610128402",
        },
        {
          createTime: "2022-08-24 17:08:50",
          status: "审核通过",
          qualityOpenStatusName: "停工工程",
          safeOpenStatusName: "停工工程",
          createUserName: "李祖江",
          phone: "18610128402",
        },
      ],
    };
  },
  methods: {
    changeStatus() {
      this.$f7.views.current.router.navigate("/project/changeStatus");
    },
    showTimes(date) {
      return formatter.formatDate(date, "hh:mm:ss");
    },
  },
};
</script>

<style lang="less" scoped>
.md {
  --f7-navbar-height: 44px;
  --f7-toolbar-height: 60px;
}
::v-deep.navbar .navbar-bg {
  background-color: var(--color-brand);
}

.navbar .navbar-bg::after,
.navbar .navbar-bg::before {
  display: none;
}

.navbar-inner {
  justify-content: space-between;
  position: relative;
}

.nav-color {
  color: var(--color-text-base) !important;
}

.navbar a.link {
  color: var(--color-text-base);
}

.navbar .right {
  font-size: var(--font-size-subcontent);
}

.nav-icon__back {
  color: var(--color-text-base);
  font-size: 18px !important;
}

/deep/.page-content {
  padding-top: calc(88px * var(--ratio));
}

.head-box {
  padding: calc(28px * var(--ratio)) 0;
  background-color: #f0f2f5;background-color: #f0f2f5;
  .head-project {
    background-color: #f7faff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(25px * var(--ratio)) calc(10px * var(--ratio));
    .head-img {
      width: 30px;
      height: 30px;
      margin-right: calc(15px * var(--ratio));
      img {
        width: 30px;
        height: 30px;
      }
    }
    .head-name {
      // font-size: var(--font-size-subtitle);
      font-size: 15px;
    }
  }
  .head-status {
    background-color: #fff;
    padding: calc(10px * var(--ratio)) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/.van-field__value {
      .van-field__body {
        color: #6eaae0;
      }
    }
  }
}
.content {
  .content-title {
    font-size: var(--font-size-subtitle);
    margin: calc(20px * var(--ratio)) calc(10px * var(--ratio));
  }
  .content-messages {
    margin-top: calc(40px * var(--ratio));
    .content-message {
      display: flex;
      justify-content: center;
      // align-items: center;
      // margin-bottom: calc(20px * var(--ratio));
      .left {
        .circular {
          width: calc(30px * var(--ratio));
          height: calc(30px * var(--ratio));
          border-radius: 50%;
          background-color: #4c81ff;
          margin-left: calc(-14px * var(--ratio));
        }
        .dotted-line {
          height: 250px;
          border-left: 1px dashed #d9e0ee;
        }
      }
      .right {
        width: 90%;
        height: 250px;
        margin-left: calc(20px * var(--ratio));
        margin-top: calc(-15px * var(--ratio));
        .message-head {
          display: flex;
          justify-content: space-between;
          // align-items: center;
          .date {
            font-weight: 600;
            font-size: var(--font-size-maincontent);
          }
          .time {
            color: #9fa8bf;
            margin-left: calc(10px * var(--ratio));
          }
          .status {
            padding: calc(10px * var(--ratio));
            border: 1px solid #e57f8c;
            color: #e57f8c;
            width: calc(200px * var(--ratio));
            text-align: center;
            border-radius: calc(20px * var(--ratio));
          }
        }
        .body {
          background-color: #f9fafc;
          border-radius: calc(10px * var(--ratio));
          .body-head {
            margin-top: calc(10px * var(--ratio));
            padding: calc(25px * var(--ratio));
            display: flex;
            .bhead-left {
              color: #a6aec5;
              margin-right: calc(35px * var(--ratio));
              div {
                margin-bottom: calc(20px * var(--ratio));
              }
            }
            .bhead-right {
              div {
                margin-bottom: calc(20px * var(--ratio));
                display: flex;
                align-items: center;
              }
              .name {
                margin-right: calc(20px * var(--ratio));
              }
              img {
                width: calc(35px * var(--ratio));
              }
              .phone {
                color: #608fff;
              }
            }
          }
          .body-foot {
            background-color: #f3f5fa;
            border-bottom-right-radius: calc(10px * var(--ratio));
            border-bottom-left-radius: calc(10px * var(--ratio));
            padding: calc(25px * var(--ratio));
            color: #a6aec5;
          }
        }
      }
    }
  }
}
</style>